<template>
  <div class="w-full h-full bg-bgc" ref="container">
  </div>
</template>

<script setup lang="ts">
import * as Cesium from 'cesium';
import { nextTick, ref } from 'vue';
import { getobjm } from '../scripts/getobjm';
import { ES3DTileset } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
import { setTilsesetStyle } from './setTilsesetStyle';

const objm = getobjm();
const container = ref<HTMLDivElement>();

nextTick(() => {
  if (!container.value) return;
  //创建球
  const viewer = objm.createCesiumViewer(container.value);
  console.log(viewer);

  //假设已请求到数据
  const data = {
    "ElementID": 1445774,
    "UUID": "3808d29f37f04468b90b91811c0496ac00160f8e"
  } as const;

  /**
   * 1.创建ES3DTileset场景对象
   * 2.监听tilesetReady事件
   * 3.设置sceneObject关键属性url
   */
  const sceneObject = objm.createSceneObjectFromClass(ES3DTileset) as ES3DTileset;
  sceneObject.d(sceneObject.tilesetReady.donce((tileset: Cesium.Cesium3DTileset) => {
    sceneObject.flyTo(); //加载完成，飞行定位
    setTilsesetStyle(tileset, data);  //设置样式
  }));
  sceneObject.url = 'http://192.168.3.18:9011/tiles/tileset.json';
})

</script>
